<!--
 * @Author: swc
 * @Date: 2024-01-09 17:08:49
 * @LastEditors: wiz
 * @LastEditTime: 2024-07-11 18:28:36
 * @FilePath: \vuexf636\src\components\piece\o-field-event-setting.vue
 * @Description: 
 * @Version: 2.0
 * @Autor: swc
-->
<template>
  <div class="event">
    <!-- <Icon class="custom-btn-add" type="ios-add-circle" @click="addEvent" /> -->
    <Button class="btn-add" size="small" type="primary" @click="addEvent">{{
      $srv.getI18nByValue('添加')
    }}</Button>
    <div class="event-item" v-for="(item, idx) of config" :key="idx">
      <div class="item-span">
        <span class="span-title">{{ $srv.getI18nByValue('事件触发') }}：</span>
        <div class="span-value">
          <Select
            @on-change="eventlDataChange"
            v-model="item.eventType"
            clearable
          >
            <Option
              v-for="item in getEventOpts"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </div>
      </div>
      <!-- <div class="item-span">
        <span class="span-title">{{ $srv.getI18nByValue('执行操作') }}：</span>
        <div class="span-value">
          <Select
            @on-change="eventlDataChange"
            v-model="item.behavior"
            clearable
          >
            <Option
              v-for="item in carryOpts"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </div>
      </div> -->
      <div class="item-span">
        <span class="span-title">{{ $srv.getI18nByValue('公共API') }}：</span>
        <div class="span-value">
          <o-m2o-selector
            v-model="item.pubApi"
            tTable="_sys_publicprocess"
            tField="f_name"
            :placeholder="$srv.getI18nByValue('选择公用API')"
            @on-change="eventlDataChange"
          >
          </o-m2o-selector>
        </div>
      </div>
      <div class="custom-btn-add">
        <Icon @click="removeEvent(idx)" type="ios-close-circle" />
      </div>
      <!-- <Icon class="custom-btn-close" @click="removeEvent(idx)" type="ios-close-circle" /> -->
    </div>
  </div>
</template>

<script lang="ts">
import { ifs, T_srv, ts, Tsrv, vue } from '@/services';
import { Model } from 'vue-property-decorator';

@T_srv.comp
export default class oFieldEventSetting extends vue {
  // @T_srv.prop({
  //   required: true,
  //   type: Array,
  //   default: []
  // })
  // value: Array<any>;
  @Model('modelchange') config: any;

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  copInfo: any;

  /* 组件名 */
  private G_compName: string = 'oFieldEventSetting';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  // private config: Array<any> = [];

  private eventOpts: any = [
    {
      value: 'focus',
      label: '焦点进入',
      range: ['BaseGrid', 'BasePanel', 'BaseView', 'cBaseForm', 'RefBaseGrid']
    },
    {
      value: 'blur',
      label: '焦点离开',
      range: ['BaseGrid', 'BasePanel', 'BaseView', 'cBaseForm', 'RefBaseGrid']
    },
    {
      value: 'dochange',
      label: '值改变',
      range: ['BaseGrid', 'BasePanel', 'BaseView', 'cBaseForm', 'RefBaseGrid']
    },
    {
      value: 'mouseleave',
      label: '鼠标离开',
      range: ['BaseGrid', 'BasePanel', 'BaseView', 'cBaseForm', 'RefBaseGrid']
    },
    {
      value: 'mouseenter',
      label: '鼠标悬浮',
      range: ['BaseGrid', 'BasePanel', 'BaseView', 'cBaseForm', 'RefBaseGrid']
    },
    {
      value: 'enter',
      label: '键盘“Enter”',
      range: ['BaseGrid', 'BaseView', 'RefBaseGrid']
    }
  ];

  private carryOpts: any = [
    {
      value: 'updateFields',
      label: '更新字段'
    },
    {
      value: 'interaction',
      label: '开启会话'
    }
  ];

  get getEventOpts() {
    return this.eventOpts.filter(item => {
      return item.range.includes(this.copInfo.name);
    });
  }

  created() {
    this.G_compID = Tsrv.utils.getGUID();
    /* 如果外部有传入组件信息 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox = new ts.T_compBox(this.G_compID); // 使用本地实例
    } else {
      this.G_compID = this.compBoxInfo.compID;
      this.GT_compBox = this.compBoxInfo.TcompBox;
    }
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
  }

  mounted() {
    /* 向父组件发送实例 */
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
  }

  private addEvent() {
    this.config.push({
      eventType: '',
      // behavior: '',
      pubApi: ''
    });
    // this.$emit('modelchange', this.config);
    // this.$emit('change');
  }

  /**
   * 移除事件
   */
  private removeEvent(index: number) {
    this.config.splice(index, 1);
    this.$emit('modelchange', this.config);
    this.$emit('change');
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }

  private saveDetailToConfig(e?: any) {
    // this.$emit('input', this.config);
  }

  private eventlDataChange(e?: any) {
    // @change="saveChanges"
    this.$emit('change');
  }
}
</script>

<style scoped lang="scss">
.event {
  position: relative;
  padding: 5px 0;
  // .custom-btn-add {
  //   // position: absolute;
  // }
  .btn-add {
    position: absolute;
    top: -30px;
    right: 10px;
  }
  .event-item {
    margin-bottom: 10px;
    box-shadow: 4px 4px 15px #eaebef;
    border-radius: 5px;
    // padding-right: 5px;
    padding: 5px 5px 5px 0;
    position: relative;
    .item-span {
      // margin-top: 100px;
      // border: solid 10px red;
      // height: 600px;
      // width: 600px;
      margin: auto;
      display: grid;
      grid-template-columns: 70px auto;
      // grid-template-columns: 1fr 2fr;
      .span-title {
        color: #606266;
        line-height: 40px;
        // text-align: right;
        // padding: 0 12px 0 0;
        padding: 0 0 0 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      .span-value {
      }
    }
    // .custom-btn-add {
    //   position: absolute;
    //   top: -5px;
    //   right: -5px;
    //   cursor: pointer;
    // }
    .custom-btn-add {
      display: inline-block;
      border-radius: 50%;
      position: absolute;
      top: -18px;
      right: -5px;
      cursor: pointer;
    }
  }
}
</style>
